<template>
  <!-- 环保 -->
  <div>
    <!-- <div class="introduce">
      <img src="../../assets/imges/huanbao.png" alt="" />
    </div>
    <div class="introduceCity">
      <img src="../../assets/imges/1_10.png" alt="" />
    </div>
    <div class="introduce">
      <img src="../../assets/imges/1_14.png" alt="" />
    </div>
    <div class="introduce">
      <img src="../../assets/imges/1_17.png" alt="" />
    </div>
    <div class="footer">
      <img src="../../assets/imges/底部.png" alt="" />
    </div> -->
    <div class="container">
      <ul class="item1">
        <li v-for="(item, i) in navData" :key="i" :class="{ nav_li: active === i }" @click="getData(item.id, i)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="content" v-html="content"></div>
  </div>
</template>
<script>
import base from '../../api/base.js'
export default {
  inject: ['reload'],
  components: {},
  data() {
    return {
      projectId: '',
      content: '',
      navData: [],
      active: 0,
    }
  },
  created() {
    this.getNavData()
  },
  mounted() {
    console.log(this.projectId)
  },
  methods: {
    getData(id, i) {
      this.active = i
      this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/pageedit/frontInfo/${id}`,
        // data: {
        //   //这里是发送给后台的数据
        //   username: this.phone,
        //   password: this.password,
        // },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data, 'content')
            // navTops.forEach((item) => {})
            this.content = res.data.data.content
          }
        })
        .catch()
    },

    //获取头部导航菜单
    getNavData() {
      this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/pageedit/list`,
        // data: {
        //   page: 1,
        //   limit: 100,
        // },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data, 'idididid')
            // navTops.forEach((item) => {})
            this.navData = res.data.data
            this.projectId = res.data.data[0].id
            // console.log(res.data.data.list[0].id, this.projectId)
            this.getData(this.projectId, 0)
          }
        })
        .catch()
    },
  },
  activated() {
    // this.getData(this.projectId)
  },
  deactivated: {},
}
</script>
<style  scoped>
.introduceCity img {
  margin-top: -5px;
}
.container {
  text-align: center;
  margin-top: 16px;
  width: 100%;
}
.content {
  width: 100%;
}

/deep/.content p img {
  width: 100.3% !important;
}
.content {
  text-align: center;
  margin-top: -16px;
}
* {
  margin: 0;
  padding: 0;
}
/deep/#tab-home {
  width: 83px !important;
}
.spanText {
  font-size: 16px;
  margin-right: 15px;
}
.nav_li {
  color: #fff;
  background: #31adda;
}
.solution {
  border-bottom: 2px #31adda solid !important;
}
.logo {
  float: left;
  margin-right: 96px;
  margin-top: 8px;
}
/* ul {
  position: relative;
} */

ul li {
  float: left;
  display: block;
  list-style: none;
  cursor: pointer;
  width: 96px;
  height: 57px;
  opacity: 1;
  font-size: 16px;
  font-family: Noto Sans S Chinese Regular, Noto Sans S Chinese Regular-Regular;
  font-weight: 500;
  margin-left: 35px;
  text-align: center;
  line-height: 57px;
}
.item1 {
  margin-left: 430px;
}
.item1 li {
  width: 115px;
  height: 76px;
  line-height: 76px;
  margin-left: 0px;
  font-size: 14px;
}
.nav_li {
  color: #fff;
  background: #31adda;
}
.footer {
}
.fr {
  float: right;
}
/deep/#tab-product {
  width: 100px !important;
}
/deep/#tab-solution {
  width: 83px !important;
}

.header {
  position: relative;
  /* padding: 0 45px; */
  /* margin-right: 45px; */
  width: 100.3%;
  height: 59px;
  line-height: 57px;
  border-bottom: 1px solid #c1c1c1;
  margin-top: -7px;
  opacity: 1;
  background: rgba(215, 218, 219, 0.1);
}
.loginBtn {
  position: absolute;
  right: 106px;
}

/deep/.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
</style>
